<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../favicon.ico" rel="shortcut icon" />
<link href="../../base.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../jquery/jquery.js" type="text/javascript"></script>
<script src="../../ux/jquery.ux.js" type="text/javascript"></script>
<script src="../../align/jquery.align.js" type="text/javascript"></script>
<script src="../../ux.popdown/jquery.ux.popdown.js" type="text/javascript"></script>
<link href="../../ux.calendar/jquery.ux.calendar.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../ux.calendar/jquery.ux.calendar.js" type="text/javascript"></script>
<link href="../../ux.button/jquery.ux.button.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../ux.button/jquery.ux.button.js" type="text/javascript"></script>
<title>jquery.ux.button</title>
</head><body>

<a href="./">&laquo; Index</a>

<style type="text/css">
#split-main, 
#split-drop {
	height: 22px;
	float: left;
	}
#split-drop .ux-button-content {
	padding: 0 2px;
	}
.ux-popdown-div {
	border: 1px solid #707070;
	margin-top: -1px;
	}
/* collapsing borders */
.right .ux-button-NW,
.right .ux-button-W,
.right .ux-button-SW {
	width: 0;
	}
.left .ux-button-NE,
.left .ux-button-SE {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
	}
.left .ux-button{
	margin-right: 0;
	}
.right .ux-button {
	margin-left: 0;
	}	
</style>

<script type="text/javascript">
jQuery(function($){
	var thedate = '2/19/2008',
	$main = $('#split-main').button({
		type: "text",
		value: thedate,
		valueIsContent: true
		}).bind("blur",function(){
			if ( !$cal.ux("calendar.select", $main.ux('button.value') ) )
				$main.ux("button.value", thedate );
			}),
	$drop = $('#split-drop').button().popdown({
		align: "left outside",
		alignTo: '#split-main',
		openClass: "ux-button-checked",
		html: function( $div ){ 
			$div.append( $cal ); 
			},
		events: { 
			show: function( ev, $div ){
				$cal.ux("calendar.select", $main.button('value') );
				$div.animate({ height:'show', opacity:'show' });
				} 
			}
		}),
	$cal = $('<div/>').calendar()
		.bind("select:calendar",function( ev, ms ){
			var date = new Date( ms );
			thedate = date.getMonth()+1 +'/'+ date.getDate() +'/'+ date.getFullYear();
			$main.ux("button.value", thedate );
			$drop.ux("popdown.hide");
			});
	});
</script>

<h2>ux.button / split calendar</h2>
<p><div id="split-main" class="left">2/19/2008</div>
	<div id="split-drop" class="right">&#x25BC;</div>	
	</p>

</body></html>